<!--流程步骤条小组件-->
<template>
  <div class="stepComp">
    <span class="btn" v-if="false"></span>
    <a-steps labelPlacement='vertical' v-model="defaultCurrent" size="small">
      <a-step v-for="(item, index) in stepArr" :key="index" disabled :status="item.status">
        <template slot="icon" v-if="item.state && item.state.indexOf('running') !== -1">
          <a-tooltip v-if="index>0">
            <template slot="title">
              {{ '耗时：' + item.runningTime }}
            </template>
            <span class="textIcon">
              {{ index + 1 }}
            </span>
          </a-tooltip>
        </template>
        <template slot="title">
          {{ item.name }}
        </template>
        <div slot="description">
          <div>{{ item.userFullName }}</div>
          <div class="urge" v-if="(item.state === 'open_running' || item.state === 'OPEN_RUNNING') && isUser == 'true' " @click="urge">催一下</div>
          <!--<div class="terminated" v-if="item.state === 'closed_terminated' && isUser == 'true'">已终止</div>-->
        </div>
      </a-step>
    </a-steps>
    <span class="btn" v-if="false"></span>
    <a-modal v-model="urgeVisible" title="催一下" centered @cancel="urgeVisible = false" v-if="urgeVisible" @ok="handleOk">
      <div class="urgeDesc">
        <div style="margin-bottom: 1.5vh;width: 85px">催办方式：</div>
        <a-radio-group v-model="radioValue">
          <a-radio :value="item.value" v-for="(item,index) in radioList" :key="index">{{item.name}}</a-radio>
        </a-radio-group>
      </div>
      <div class="urgeDesc">
        <div style="margin-bottom: 1.5vh;width: 200px">催办描述：</div>
        <a-textarea
          style="width: 50vw"
          v-model="modalAreaValue"
          placeholder="请输入"
          :auto-size="{ minRows: 8, maxRows: 8 }"
        />
      </div>
    </a-modal>
  </div>
</template>
<script>
import { urgeFlyBook } from "@api/projectReview"
import { knotbookSignUrgeToDo, workitemUrgeToDo } from '@api/projectAccepApi'
let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
export default {
  name: 'stepComp',
  data() {
    return {
      defaultCurrent: null,
      urgeVisible: false,
      modalAreaValue: '',
      radioList: [
        {
          name: "邮件",
          value: "email",
        },
        {
          name: "飞书",
          value: "flyBook",
        }
      ],
      radioValue: "flyBook",
      reviewId: sessionStorage.getItem("reviewId"),
    }
  },
  props: {
    stepArr: {
      type: Array
    },
    isUser: {
      type: [Boolean, String],
      default: false
    },
    pageType: {
      type: String,
      default: ''
    },
    nowDataStatus: { // 当前验收表信息
      type: Object,
      default: () => {}
    },
    reviewStatus: {
      type: String,
      default: ''
    },
    objOid:{
      type: String,
      default: ""
    }
  },
  watch: {
    stepArr(val, oldVal) {
    //   // this.stepArr = val
    //   // console.log(7889,val,this.stepArr)
    //   if(val.length<1) return
    //   this.stepArr = val
    //   // 1.判断有没有走到结束
    //   let o = this.stepArr[this.stepArr.length - 2]
    //   if (o.state.indexOf('close') !== -1) {
    //     this.defaultCurrent = this.stepArr.length - 1
    //   } else {
    //     // 2.没有到结束--判断当前在哪一步
    //     this.stepArr.map((i, d) => {
    //       if (i.state.indexOf('running') !== -1) {
    //         this.defaultCurrent = d
    //       }
    //     })
    //   }
    if (this.stepArr.length < 1) return
    let isClose = this.stepArr.some(m => m.state && m.state.indexOf('running') !== -1)
    // console.log(isClose, '113');
    // 当整个流程状态没有running时
    if (!isClose) {
      // 最后一个节点状态时流程通过  则整个流程全都通过  否则是流程取消  整个流程全部置灰
      if(this.stepArr[this.stepArr.length - 1].state === 'closed_completed_executed' || this.reviewStatus === "评审通过") {
        this.defaultCurrent = this.stepArr.length
      } else {
        this.defaultCurrent = -1
      }
    } else {
      // 1.判断有没有走到结束
      let o = this.stepArr[this.stepArr.length - 2]
      if (o && o.state.indexOf('close') !== -1) {
        // this.defaultCurrent = this.stepArr.length - 1
        this.defaultCurrent = this.stepArr.length - 1
      } else {
        // 2.没有到结束--判断当前在哪一步
        this.stepArr.map((i, d) => {
          if (i.state.indexOf('running') !== -1) {
            this.defaultCurrent = d
          }
        })
      }
    }
    }
  },
  mounted() {
    if (this.stepArr.length < 1) return
    let isClose = this.stepArr.some(m => m.state.indexOf('running') !== -1)
    // 当整个流程状态没有running时
    if (!isClose) {
      // 最后一个节点状态时流程通过  则整个流程全都通过  否则是流程取消  整个流程全部置灰
      if(this.stepArr[this.stepArr.length - 1].state === 'closed_completed_executed' || this.reviewStatus === "评审通过") {
        this.defaultCurrent = this.stepArr.length
      } else {
        this.defaultCurrent = -1
      }
    } else {
      // 1.判断有没有走到结束
      let o = this.stepArr[this.stepArr.length - 2]
      if (o && o.state.indexOf('close') !== -1) {
        // this.defaultCurrent = this.stepArr.length - 1
        this.defaultCurrent = this.stepArr.length - 1
      } else {
        // 2.没有到结束--判断当前在哪一步
        this.stepArr.map((i, d) => {
          if (i.state.indexOf('running') !== -1) {
            this.defaultCurrent = d
          }
        })
      }
    }
  },
  methods: {
    urge() {
      this.urgeVisible = true
    },
    handleOk() {
      console.log(12366,this.pageType)
      if (this.pageType === 'look') {
        let params = {
          userId: userinfo.loginName,
          oid: this.nowDataStatus.oid,
          feishu: this.radioValue === "flyBook" ? true : false,
          content: this.modalAreaValue,
          email: this.radioValue === "email" ? true : false
        }
        knotbookSignUrgeToDo(params).then(res=>{
          if(res.status === 200){
            if(res.data.success){
              this.$message.success('催办成功！！')
            }
          }
        })
      }else if(this.pageType === 'change' || this.pageType === 'question') {
        let params = {
          userId: userinfo.loginName,
          oid: this.objOid,
          feishu: this.radioValue === "flyBook" ? true : false,
          content: this.modalAreaValue,
          email: this.radioValue === "email" ? true : false
        }
        workitemUrgeToDo(params).then(res=>{
          if(res.status === 200){
            if(res.data.success){
              this.$message.success('催办成功！！')
            }
          }
        })
      }else {
        let params = {
          userId: userinfo.loginName,
          oid: this.reviewId,
          feishu: this.radioValue === "flyBook" ? true : false,
          content: this.modalAreaValue,
          email: this.radioValue === "email" ? true : false
        }
        urgeFlyBook(params).then(res=>{
          if(res.status === 200){
            if(res.data.success && res.data.success=='true'){
              this.$message.success('催办成功！！')
            }else{
              this.$message.error(res.data.message)
            }
          }
        })
      }
      this.urgeVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.stepComp {
  overflow: hidden;
  display: flex;
  // align-items: center;
  justify-content: center;
  .btn {
    width: 1vw;
    height: 2vw;
    display: inline-block;
    background-color: cornflowerblue;
  }
  /deep/ .ant-steps {
    .ant-steps-item-process {
      .ant-steps-item-container {
        .ant-steps-item-icon {
          .ant-steps-icon {
            color: #fff;
            font-size: 16px;
            .textIcon {
              display: inline-block;
              border-radius: 50%;
              width: 32px;
              height: 32px;
              background-color: #386bd7;
            }
          }
        }
        .ant-steps-item-icon:hover {
          cursor: pointer;
        }
      }
    }
  }
  /deep/ .ant-steps-small {
    .ant-steps-item-process {
      .ant-steps-item-container {
        .ant-steps-item-icon {
          .ant-steps-icon {
            color: #fff;
            font-size: 16px;
            .textIcon {
              display: inline-block;
              border-radius: 50%;
              width: 24px;
              height: 24px;
              background-color: #386bd7;
            }
          }
        }
        .ant-steps-item-icon:hover {
          cursor: pointer;
        }
      }
    }
  }
  .urge{
    color: #386bd7;
    font-size: 12px;
    cursor: pointer;
  }
  .terminated{
    color: red;
    font-size: 12px;
    cursor: pointer;
  }
}
</style>
<style lang="less">
.urgeDesc{
  display: flex;
  justify-content: flex-start;
}
</style>